<template>
  <div class="templatetable-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button :icon="DocumentAdd" plain type="primary" @click="toAdd">
          新增
        </el-button>
        <el-button
          :disabled="!currentRow"
          :icon="Edit"
          plain
          type="warning"
          @click="toUpdate()"
        >
          修改
        </el-button>
        <el-button
          :disabled="!currentRow"
          :icon="Delete"
          plain
          type="danger"
          @click="toDelete()"
        >
          删除
        </el-button>
        <el-button
          :disabled="!currentRow"
          :icon="Refresh"
          plain
          type="primary"
          @click="toChangePrem()"
        >
          权限修改
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      ref="roleListTable"
      :data="showData"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column align="center" label="序号" type="index" width="80px" />
      <el-table-column label="角色编码" min-width="80" prop="roleCode" />
      <el-table-column label="角色名称" min-width="180" prop="roleName" />
      <el-table-column label="角色备注" min-width="180" prop="roleMemo" />
    </el-table>
    <AddOrUpdateRoleVue ref="aoum" @success-callback="getData" />
    <ChangePermVue ref="cpv" />
    <ChangePerms ref="cp" />
  </div>
</template>
<script setup>
  import AddOrUpdateRoleVue from './modules/AddOrUpdateRole.vue'
  import ChangePermVue from './modules/ChangePerm.vue'
  import ChangePerms from './modules/ChangePerms.vue'
  import { findAllRoleApi, deleteRoleApi } from '@/api/comdesk/role'
  import { ref } from 'vue'
  import { DocumentAdd, Delete, Edit, Refresh } from '@element-plus/icons-vue'
  import { localStorageConfig } from '@/config/localstorage.config'

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')
  // ---- import end----
  // ---- init start ----
  const cp = ref()
  const roleListTable = ref()
  // ---- init end ----
  // ---- table filter start ---
  const roleNameSearch = ref('')
  const currentRow = ref()
  // ---- table filter end ----
  // ---- action start ----
  const handleCurrentChange = (row) => {
    currentRow.value = row
  }
  const toUpdate = () => {
    aoum.value.toOpenDialog(currentRow.value)
  }
  const toAdd = () => {
    aoum.value.toOpenDialog()
  }

  const toDelete = async (row) => {
    ElMessageBox.confirm('确定要删除该角色信息吗?', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        const res = await deleteRoleApi({ pkRole: row.pkRole })
        if (res && String(res.code) === '2000') {
          $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
          getData()
        } else {
          $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
        }
      })
      .catch(() => {})
  }

  const toChangePrem = async () => {
    // cpv.value.toOpenChangePerm(currentRow.value)
    cp.value.handleOpen(currentRow.value)
  }
  // ---- action end ----
  // ---- DataSource start ----
  const state = reactive({
    dataSources: [],
  })
  const showData = computed(() => {
    return state.dataSources.filter((dItem) => {
      return (
        !roleNameSearch.value ||
        dItem.roleName.indexOf(roleNameSearch.value) > -1
      )
    })
  })
  const getData = async () => {
    const load = $baseLoading()
    const res = await findAllRoleApi({ pkCorp: pkCorp })
    load.close()
    if (res && String(res.code) === '2000') {
      state.dataSources = res.data
    } else {
      $baseMessage(res && res.msg ? res.msg : '获取失败,请重试', 'error')
    }
  }
  // ---- DataSource end ----

  onMounted(() => {
    getData()
  })

  // ---- Add or Update start ----
  const aoum = ref('aoum')
  const cpv = ref()
  // ---- Add or Update end ----
</script>
